<template>
  <div class="side">
    <!-- 注册 -->
    <div v-if="vipRadio==='虚拟币设置'">
      <div class="reister">
        <el-row>
          <el-button type="primary" class="dakai" @click="createData()">提交更新</el-button>
        </el-row>
      </div>
    </div>
    <div v-if="vipRadio==='使用方式'">
      <div v-show="isShow">
        <div class="reister">
          <el-row>
            <el-button type="primary" @click="next()" class="dakai">下一步</el-button>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 默认三个按钮要隐藏 -->
    <div v-show="bb">
      <el-radio-group v-model="otherRadio" style="margin-bottom:15px">
        <el-radio-button label="课程"></el-radio-button>
        <el-radio-button label="班级"></el-radio-button>
        <el-radio-button label="会员"></el-radio-button>
      </el-radio-group>
    </div>
    <!-- 当点击下一步按钮时要进行隐藏掉 -->
    <div v-show="isShow">
      <el-radio-group v-model="vipRadio" style="margin-bottom:15px">
        <el-radio-button label="虚拟币设置"></el-radio-button>
        <el-radio-button label="使用方式"></el-radio-button>
      </el-radio-group>
      <div style="width:100%">

        <div v-if="vipRadio==='虚拟币设置'">
          <el-form :model="CoinSet" label-position="right" label-width="181px" ref="dataForm">
            <el-form-item label="虚拟币名称" style="margin-top:20px;">
              <el-input v-model="CoinSet.name" style="width:800px;color:#606266;"></el-input>
            </el-form-item>
            <el-form-item label="虚拟币图片">
              <img v-if="CoinSet.url" :src="CoinSet.url" alt class="img" style="width:270px;height:270px;">
              <el-upload
                :on-change="handleChange"
                :http-request="uploadFile"
                :limit="1"
                action=""
                class="upload-demo"
                accept="image/jpg, image/png"
              >
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="条款内容">
              <tinymce v-model="CoinSet.memo" :height="200" style="width:800px;"/>
            </el-form-item>
          </el-form>
        </div>


        <div v-if="vipRadio==='使用方式'">
          <el-form :model="zhuce" label-position="right" label-width="181px">
            <!-- 使用方式 -->
            <el-form-item label="使用方式设置" style="margin-top:20px;">
              <el-radio-group v-model="zhuce.radio">
                <el-radio :label="1">不使用</el-radio>
                <el-radio :label="2">用于折扣</el-radio>
                <el-radio :label="3">用于标价</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="使用方式设置" style="margin-top:20px;">
              <el-input v-model="zhuce.xiaNume" style="width:600px;color:#606266;"></el-input>
              <p style="margin:0;color:#606266">在此设置1元可换取的虚拟币数量，建议汇率设置后不要进行改动</p>
            </el-form-item>

            <!-- 不适用 -->
            <div v-if="zhuce.radio === 1">
              <el-form-item label="">
                <div class="boot">
                  <div>1、暂无手动修改用户虚拟币余额的功能</div>
                  <div>2、充值虚拟币，需安装学习卡或账户充值插件</div>
                </div>
              </el-form-item>
            </div>
            <!-- 用于折扣 -->
            <div v-if="zhuce.radio === 2">
              <el-form-item label="">
                <div class="boot">
                  <div>1、暂无手动修改用户虚拟币余额的功能</div>
                  <div>2、充值虚拟币，需安装学习卡或账户充值插件</div>
                  <div>3、虚拟币用于抵扣：网校以人民币作为支付货币，并可以使用虚拟币进行按比例抵扣(虚拟币类似于淘金币）</div>
                  <div>4、使用方式一旦保存（使用方式和汇率），请勿随意改动</div>
                  <div>5、使用方式的切换会使课程价格根据汇率变动</div>
                  <div>6、如有参加促销活动的课程，修改价格都将有相应的折扣</div>
                </div>
              </el-form-item>
            </div>
            <!-- 用于标价 -->
            <div v-if="zhuce.radio === 3">
              <el-form-item label="">
                <div class="boot">
                  <div>1、暂无手动修改用户虚拟币余额的功能</div>
                  <div>2、充值虚拟币，需安装学习卡或账户充值插件</div>
                  <div>3、虚拟币用于标价：网校以虚拟币作为支付货币，课程和会员以虚拟币标价和结算</div>
                  <div>4、虚拟币用于标价后，移动端仍显示人民币价格（移动端暂不支持虚拟币支付）</div>
                  <div>5、使用方式一旦保存（使用方式和汇率），请勿随意改动</div>
                  <div>6、使用方式的切换会使课程价格会根据汇率变动</div>
                  <div>7、如有参加促销活动的课程，修改价格都将有相应的折扣</div>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <!-- 课程表格 -->
    <div v-show="bb" v-if="otherRadio==='课程'">
      <subTable :table-label="tableLabel" :table-data="tableData">
        <el-table-column align="left" label="课程" slot="first">
          <template slot-scope="scope">
            <img style="width:177px;height:101px;" src="@/assets/404_images/tupian.png" srcset="">
            <span>法学</span>
          </template>
        </el-table-column>
      </subTable>
    </div>

    <!-- 班级 -->
    <div v-show="bb" v-if="otherRadio==='班级'">
      <subTable :table-label="tableLabell" :table-data="tableDataa">
        <el-table-column align="left" label="班级" slot="first">
          <template slot-scope="scope">
            <img style="width:177px;height:101px;" src="@/assets/404_images/tupian.png" srcset="">
            <span>五年</span>
          </template>
        </el-table-column>
      </subTable>
    </div>

    <!-- 会员 -->
    <div v-show="bb" v-if="otherRadio==='会员'">
      <subTable :table-label="tableLabelm" :table-data="tableDatam">
        <el-table-column align="left" label="会员" slot="first">
          <template slot-scope="scope">
            <img style="width:177px;height:101px;" src="@/assets/404_images/tupian.png" srcset="">
            <span>金牌合伙人</span>
          </template>
        </el-table-column>
      </subTable>
    </div>
  </div>
</template>

<script>
  import subTable from '@/components/Eltable'
  import Tinymce from "@/components/Tinymce";
  import {upLoadFile} from '@/api/upLoadFile' // 数据接口
  import {getTenantId} from '@/utils/auth';
  import {addCoinSet, getCoinSet} from '@/api/system/coin_set';

  export default {
    components: {
      Tinymce,
      subTable
    },
    data() {
      return {
        otherRadio: '课程',
        vipRadio: '虚拟币设置',
        CoinSet: {
          name: "",
          url: '',
          memo: ''
        },
        file: '',
        bb: false,
        isShow: true,
        dialogData: {
          addUser: {
            title: ''
          },
          addMoreUser: {
            title: '',
            uploadUrl: '',
            fileList: []
          },
        },
        name: '1',
        isSet: true,
        handleEdit: false,
        Navigation: {
          name: '',
          url: '',
          isNewWin: 1,
          isOpen: 1,
          type: 'top',
        },
        tableLabel: [
          {
            label: "人民币价格",
            prop: "newpage"
          },
          {
            label: "最大可抵扣比率",
            prop: "status"
          },
          {
            label: "最大可抵扣金额",
            prop: "money"
          },
          {
            label: "最大可用农商币",
            prop: "nongshang"
          },
        ],
        tableLabell: [
          {
            label: "人民币价格",
            prop: "newpage"
          },
          {
            label: "最大可抵扣比率",
            prop: "status"
          },
          {
            label: "最大可抵扣金额",
            prop: "money"
          },
          {
            label: "最大可用农商币",
            prop: "nongshang"
          },
        ],
        tableLabelm: [
          {
            label: "人民币价格",
            prop: "newpage"
          },
          {
            label: "最大可抵扣比率",
            prop: "status"
          },
          {
            label: "最大可抵扣金额",
            prop: "money"
          },
          {
            label: "最大可用农商币",
            prop: "nongshang"
          },
        ],
        tableData: [
          {
            newpage: '0.10',
            status: '100%',
            money: "0.10",
            nongshang: "0.10",
          },
        ],
        tableDataa: [
          {
            newpage: '0.10',
            status: '100%',
            money: "0.10",
            nongshang: "0.10",
          },
        ],
        tableDatam: [
          {
            newpage: '0.10',
            status: '100%',
            money: "0.10",
            nongshang: "0.10",
          },
        ],
        zhuce: {
          radio: 2,
          radio1: 3,
          radio2: 1,
          radio3: 2,
          radio4: 1,
          radio5: 1,
          body: "",
          newName: "农商币",
          xiaNume: "1"
        }
      };
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getCoinSet(getTenantId()).then(response => {
          this.CoinSet = response.data
        }).catch(err => {
          console.log(err)
        })
      },
      handleChange(file) {
        this.file = file.raw
      },
      uploadFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.file.name)
        fileForm.append('uid', this.file.uid)
        fileForm.append('file', this.file)
        upLoadFile(fileForm).then(response => {
          this.CoinSet.url = response.data.url
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.CoinSet.tenantId = getTenantId();
            addCoinSet(this.CoinSet).then(() => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      next() {
        this.isShow = !this.isShow
        this.bb = !this.bb;
        this.name = '5';
      }
    }
  };
</script>

<style>
  .reister {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
    margin-bottom: 10px;
  }

  .dakai {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }

  .boot {
    width: 600px;
    margin-top: -27px;
    padding: 15px 15px;
    border-radius: 5px;
    background-color: #d9edf7;
    color: #326f8f;
    border-left: 5px solid #50bfff;
  }

</style>
